<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no">
    <link rel="stylesheet" href="./css/element-ui.css">
    <script src="./js/vue.js"></script>
    <script src="./js/element-ui.js"></script>
    <script src="./js/data.js"></script>
    <script src="./js/download.js"></script>

    <style>
        html,
        body {
            height: 100%;
        }

        .item {
            width: 100%;
            margin: 0 auto;
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            justify-content: flex-start;
            position: relative;
        }

        .block {
            display: flex;
            width: 50%;
            align-items: center;
            flex-direction: column;
            margin: 10px auto;
        }

        .block .img_top {
            width: 90%;
            border-radius: 10px;
            object-fit: cover;
        }

        .language_container {
            background-color: white;
            display: flex;
            justify-content: flex-start;
            height: 50px;
            width: 100%;
            position: sticky;
            top: 0;
            z-index: 1;
        }

        .box1 {
            margin-right: .5rem;
        }

        .language_container .btn_type_video {
            color: #000000;
            left: 10px;
            background-color: #FFFFFF;
            font-size: 18px;
            border-width: 0;
        }

        .language_container .btn_type_pdf {
            color: #aaaaaa;
            background-color: #FFFFFF;
            font-size: 18px;
            border-width: 0;
        }

        .language_container .btn_type_device {
            color: #aaaaaa;
            background-color: #FFFFFF;
            font-size: 18px;
            border-width: 0;
        }

        .language {
            height: 30px;
            position: absolute;
            top: 10px;
            right: 10px;

        }

        .top_container {
            margin-left: 2.5%;
            width: 95%;
            margin-top: 10px;
        }

        .top_container .top_container_abs {
            position: relative;
            display: inline-block;
        }

        .top_container .top_container_abs .container_top {
            width: 100%;
        }

        .top_container .top_container_abs .container_bottom {
            width: 100%;
            position: absolute;
            bottom: 5px;
            left: 0px;
        }

        .container_bottom_container {
            /*height: 50px;*/
            position: relative;
            /*display: inline-block;*/
            width: 100%;
        }

        .container_bottom_container .img_share {
            position: absolute;
            right: 3%;
            bottom: 12px;
            width: 22px;
            height: 22px;
        }

        .img-auto {
            display: inline-block;
            max-width: 100%;
        }

        .block_bottom_container {
            width: 100%;
            height: auto;
            max-height: 70px;
            display: flex;
            justify-content: space-between;
            overflow: hidden;
            align-items: flex-start;
        }

        .block_bottom_container .img_bottom {
            height: 50px;
            margin: 5px;

        }

        .block_bottom_container .img_download, .block_bottom_container .img_share {
            width: 1.5rem;
            height: 1.5rem;
            margin-top: 7px;
        }

        .video_line_style {
            width: 20px;
            height: 4px;
            background-color: #3F9DFE;
            display: flex;
            align-content: center;
            border-radius: 2px;
            margin: 0 auto;

        }

        .pdf_line_style {
            width: 20px;
            height: 4px;
            background-color: #3F9DFE;
            display: flex;
            align-content: center;
            border-radius: 2px;
            margin: 0 auto;

        }

        .box {
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
        }


        .block1 {
            display: flex;
            width: 50%;
            align-items: center;
            flex-direction: column;
            margin: 5px auto;
        }

        .block1 .device_img {
            width: 100%;
        }

        .el-dialog {
            display: flex;
            flex-direction: column;
            margin: 0 !important;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            max-height: calc(100% - 30px);
            max-width: calc(100% - 30px);
            border-radius: 10px;
            background-color: #3e3e3e;
            opacity: 0.8;
        }

        .el-dialog__header {
            padding: 0px;
        }

        .el-dialog__body {
            padding: 0px 0px 0px 0px;
            flex: 1;
        }

        .el-dialog img {
            width: 100%;
            border-radius: 10px;
            margin-bottom: -4px;
        }

        .cover_close_style {
            width: 25px;
            height: 25px;
            position: absolute;
            top: 4%;
            right: 4%;

        }

        .tabs {
            width: 75%;
            align-items: center;
            white-space: nowrap;
            overflow-x: auto;
            -webkit-overflow-scrolling: touch; /* 适用于移动端 */
            padding: 10px 0px 0px 0px;
        }

        .tabs::-webkit-scrollbar {
            display: none;
        }

        .tabs .box {
            display: inline-block;
        }
    </style>
</head>

<body>
<div class="app" v-loading="loading" :element-loading-text="loading_title"
     element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)">
    <div class="language_container">


        <div class="tabs">
            <div class="box box1">
                <button id="btn_type_video" class="btn_type_video"
                        @click="typeVideoAction()">{{ type_video_title }}
                </button>
                <div v-if="type_active_index === 0" class="video_line_style"></div>
            </div>
            <div class="box">
                <button id="btn_type_pdf" class="btn_type_pdf" @click="typePdfAction()">{{ type_pdf_title }}</button>
                <div v-if="type_active_index === 1" class="pdf_line_style"></div>

            </div>

            <div class="box">
                <button id="btn_type_device" class="btn_type_device" @click="typeDeviceAction()">{{ type_device_title }}
                </button>
                <div v-if="type_active_index === 2" class="pdf_line_style"></div>

            </div>
        </div>
        <div v-if="language_type===0">
            <img class="language" src="img/video/anyfit_change_language_cn.png" @click="change_language()">
        </div>
        <div v-if="language_type===1">
            <img class="language" src="img/video/anyfit_change_language_en.png" @click="change_language()">
        </div>

    </div>


    <div class="top_container" v-if="type_active_index === 0">
        <!-- 视频展册头部 -->
        <div class="top_container_abs">
            <img id="container_top" class="container_top" :src="top_data.top_top_img"
                 @click="click_preview_action(top_data)"/>
            <div class="container_bottom_container">
                <img id="container_bottom" class="container_bottom" :src="top_data.top_bottom_img"
                     @click="click_action(top_data)"/>
                <img class="img_share" src="img/anyfit_top_share_icon.png" @click="share_action(top_data)">

            </div>

        </div>
    </div>


    <div class="box">
        <div class="item">
            <div class="block" v-if="type_active_index !== 2" v-for="cn_obj in data_array" :key="cn_obj">
                <img class="img_top" :src="cn_obj.img_top" @click="click_preview_action(cn_obj)"/>

                <div class="block_bottom_container">
                    <img class="img_bottom" :src="cn_obj.img_bottom"/>

                    <div style="margin-right: 10px;display: flex;align-items: center;">
                        <img class="img_download img-auto" src="img/video/anyfit_download_icon.png"
                             @click="click_action(cn_obj)">
                        <img class="img_share img-auto" src="img/anyfit_share_icon.png" @click="share_action(cn_obj)">
                    </div>
                </div>
            </div>

            <div class="block1" v-if="type_active_index === 2" v-for="(cn_obj,idx) in data_array">
                <img class="device_img" @click="device_click(idx)" :src="cn_obj.device_img"/>
            </div>

        </div>
    </div>
    <el-dialog
            :visible.sync="show_device_cover"
            width="70%"
            :close-on-click-modal="false"
            :show-close="false">
        <div v-if="device_cover_idx !== -1">
            <img :src="data_array[device_cover_idx].device_cover_img" alt=""
                 width="100%" height="100%">
            <div class="cover_close_style" @click="device_close_click()"></div>
        </div>
    </el-dialog>

</div>
</body>


<script type="text/javascript">
    //创建vue对象
    var vm = new Vue({
        el: ".app",
        created() {
            this.start();
        },
        mounted() {
            // 当组件挂载时，设置初始标题
            this.setDocumentTitle();
        },
        data: {
            loading_title: cn_loading_title,
            loading: false,
            title: cn_title,
            type_pdf_title: type_pdf_cn_title,
            type_video_title: type_video_cn_title,
            type_device_title: type_device_cn_title,
            device_cover_idx: -1,
            show_device_cover: false,
            language_type: 0,
            type_active_index: 0, // 0视频展册  1pdf展册
            data_array: category_video_data_cn(),
            top_data: category_video_data_cn()[0],
        },

        methods: {
            start() {
                if (isPC()) {
                    {
                        console.log("跳转pc");
                        window.location.replace("./index_pc.html");
                    }
                }
            },
            click_action(obj) {
                if (this.language_type === 0) {
                    // 中文
                    vm.loading_title = cn_loading_title;
                    this.type_pdf_title = type_pdf_cn_title;
                    this.type_video_title = type_video_cn_title;
                } else {
                    // 英文
                    vm.loading_title = en_loading_title;
                    this.type_pdf_title = type_pdf_en_title;
                    this.type_video_title = type_video_en_title;
                }
                vm.loading = true
                setTimeout(this.delayAction, show_loading_time);
                downloadfile(base_url + obj.url, obj.title, getFileType(obj.url));
            },
            share_action(obj) {
                let createInput = document.createElement("input");
                createInput.value = base_url + obj.url;
                // 获取的是容器的innerHTML，如果是容器是input，就改为value即可
                document.body.appendChild(createInput);
                createInput.select();
                document.execCommand("Copy");
                alert(this.language_type === 0 ? copy_success_cn : copy_success_en);
                createInput.remove();
            },
            typeVideoAction() {
                this.type_active_index = 0;
                this.autoSelect();
            },
            typePdfAction() {
                this.type_active_index = 1;
                this.autoSelect();
            },
            typeDeviceAction() {
                this.type_active_index = 2;
                this.autoSelect();

            },
            device_click(idx) {
                this.device_cover_idx = idx;
                this.show_device_cover = true;
            },
            device_close_click() {
                this.device_cover_idx = -1;
                this.show_device_cover = false;
            },
            delayAction() {
                vm.loading = false
            },
            click_preview_action(obj) {
                window.open(base_url + obj.url);
            },
            setDocumentTitle() {
                document.title = this.title;
                this.autoSelect();
            },
            change_language() {
                if (this.language_type === 0) {
                    this.language_type = 1;
                    this.autoSelect();
                } else {
                    this.language_type = 0;
                    this.autoSelect();
                }
                this.setDocumentTitle();
            },
            autoSelect() {
                let element = document.querySelector(".item");
                element.style.width = "100%";
                document.getElementById("btn_type_video").style.color = "#AAAAAA";
                document.getElementById("btn_type_pdf").style.color = "#AAAAAA";
                document.getElementById("btn_type_device").style.color = "#AAAAAA";
                let elementId;

                if (this.type_active_index === 0) {
                    // 视频
                    elementId = "btn_type_video";
                    if (this.language_type === 0) {
                        let arr = category_video_data_cn();
                        this.top_data = arr[0];
                        arr.splice(0, 1);
                        this.data_array = arr;
                    } else {
                        let arr = category_video_data_en();
                        this.top_data = arr[0];
                        arr.splice(0, 1);
                        this.data_array = arr;
                    }
                } else if (this.type_active_index === 1) {
                    // 展册
                    elementId = "btn_type_pdf";
                    if (this.language_type === 0) {
                        this.data_array = category_pdf_data_cn();
                    } else {
                        this.data_array = category_pdf_data_en();
                    }

                } else if (this.type_active_index === 2) {
                    // 设备
                    element.style.width = "90%";
                    elementId = "btn_type_device";
                    if (this.language_type === 0) {
                        this.data_array = category_device_data_cn();
                    } else {
                        this.data_array = category_device_data_en();
                    }
                }

                if (this.language_type === 1) {
                    this.title = en_title;
                    this.language = en_language;
                    this.type_pdf_title = type_pdf_en_title;
                    this.type_video_title = type_video_en_title;
                    this.type_device_title = type_device_en_title;
                } else {
                    this.title = cn_title;
                    this.language = cn_language;
                    this.type_pdf_title = type_pdf_cn_title;
                    this.type_video_title = type_video_cn_title;
                    this.type_device_title = type_device_cn_title;
                }
                document.getElementById(elementId).style.color = "#000000";
            }
        },
    });
</script>

</html>
